<template>
  <picker-view indicator-style="height: 40px;" :value="checkValue" @change="bindChange" class="picker-view">
    <picker-view-column>
      <view class="item" v-for="(item,index) in range" :key="index">{{item}}</view>
    </picker-view-column>
  </picker-view>
</template>

<script setup>
import { readuceNumFn } from "@/utils";
import useStore from "@/store";
const { common } = useStore();
const props = defineProps({
  mode: {
    type: String,
    default: "",
  },
  formData: {
    type: Object,
    default: () => {},
  },
  range: {
    type: Array,
    default: () => [],
  },
});

const checkValue = ref([0]);
const isChange = ref(false);

// 滑动选择
const bindChange = (e) => {
  isChange.value = true;
  const val = e.detail.value;
  getNum(val);
};

// 赋值
const getNum = (val = []) => {
  const res = props.range[val[0]];
  props.formData[props.mode] = res || initVal;
};

const init = () => {
  const initVal = props.formData[props.mode];
  const index = props.range.findIndex((v) => v == initVal);
  const i = index != -1 ? index : 0;
  checkValue.value = [i];
  getNum([i]);
};

onMounted(() => {
  init();
});
</script>

<style lang=scss scoped>
.picker-view {
  width: 100%;
  height: 560rpx;
  margin: 60rpx 0;
}
.divider {
  color: #999;
  font-size: 40rpx;
  font-weight: 400;
  line-height: 40px;
}
.item {
  line-height: 80rpx;
  text-align: center;
  font-weight: bold;
  font-size: 40rpx;
}
</style>